// 评分分布柱状图API数据格式要求：
// [
//   { rating: '9.7', count: 1 },
//   { rating: '9.6', count: 2 },
//   ...
// ]
// 如果API可用则优先显示API数据，否则显示默认数据

document.addEventListener('DOMContentLoaded', function() {
    // 获取容器
    const chartDom = document.getElementById('ratingBar_copy');
    const chart = echarts.init(chartDom);
    
    // 显示加载动画
    chart.showLoading({
        text: '数据加载中...',
        color: '#14c8fd',
        textColor: '#fff',
        maskColor: 'rgba(13, 26, 45, 0.8)'
    });

    // 默认数据
    let data = [];

    // API接口地址（如有则优先使用API数据）
    const apiUrl = '/api/rating/distribution';

    // 尝试从API获取数据
    fetch(apiUrl)
        .then(res => {
            if (!res.ok) throw new Error('Network response was not ok');
            return res.json();
        })
        .then(response => {
            // 检查返回的数据格式是否正确
            if (response.code === 200 && response.data) {
                // 将对象格式转换为饼图所需的数组格式
                data = Object.entries(response.data)
                    .map(([rating, count]) => ({
                        value: count,
                        name: `评分 ${rating}`
                    }))
                    .sort((a, b) => b.name.localeCompare(a.name)); // 按评分从高到低排序
                console.log('成功获取数据：', data);
            }
        })
        .catch(err => {
            console.warn('使用默认数据，API获取失败：', err);
        })
        .finally(() => {
            renderChart(data);
        });

    // 渲染图表的函数
    function renderChart(data) {
        // 图表配置项
        const option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '70%'],
                // adjust the start and end angle
                startAngle: 180,
                endAngle: 360,
                data: data
              }
            ]
          };

        // 使用配置项显示图表
        chart.hideLoading();
        chart.setOption(option);

        // 监听窗口大小变化
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }
}); 